.base {
  background-color: var(--cui-bg-subtle);
  box-shadow: 0 0 0 var(--cui-border-width-kilo) var(--cui-border-subtle);
}

img.base {
  display: block;
  object-fit: cover;
  object-position: center;
}

div.base {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--cui-font-weight-bold);
  color: var(--cui-fg-placeholder);
  user-select: none;
}

/* Sizes */

.s {
  width: 48px;
  height: 48px;
  border-radius: var(--cui-border-radius-byte);
}

div.s {
  font-size: 24px;
}

.m {
  width: 96px;
  height: 96px;
  border-radius: var(--cui-border-radius-kilo);
}

div.m {
  font-size: 48px;
}

/* Variants */

.identity {
  border-radius: var(--cui-border-radius-circle);
}
